<template>
  <div id="postlist">
    <headbar></headbar>
    <div class="main-content clearfix">
      <div class="container clearfix">
        <a href="edit.html" class="btn manage-btn">新建文章</a>
      </div>
      <div class="table-responsive container">
        <table id="fd-data" class="table table-striped">
          <thead>
          <tr>
            <th v-for="name in head">{{ name.msg }}</th>
            <th colspan="2">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="value in article">
            <th scope="row">{{ value.title }}</th>
            <td>{{ value.classify }}</td>
            <td>{{ value.view }}</td>
            <td>{{ value.like }}</td>
            <td>{{ value.comment }}</td>
            <td><a href="#" class="edit">编辑</a></td>
            <td>
              <a href="#" class="delete" data-toggle="modal" data-target="#deleteModal">删除</a>
            </td>
          </tr>
          </tbody>
        </table>
        <!-- Modal -->
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">确认</h4>
              </div>
              <div class="modal-body">
                <p>你确定要删除这篇文章吗？</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">删除</button>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <footbar></footbar>
  </div>
</template>

<script>
  import headbar from '../../components/header.vue'
  import footbar from '../../components/footer.vue'

  export default {
    name: 'postlist',
    components: {
      headbar, footbar,
    },
    data: function () {
      return {
        head: [
          {msg: '标题'},
          {msg: '分类'},
          {msg: '阅读数'},
          {msg: '喜欢数'},
          {msg: '评论数'}
        ],
        article: [
          {
            'title': '快速软件开发第一部分有效开发完成',
            'classify': '开发',
            'view': '142',
            'like': '66',
            'comment': '88'
          },
          {
            'title': '快速软件开发第一部分有效开发完成',
            'classify': '开发',
            'view': '142',
            'like': '66',
            'comment': '88'
          },
          {
            'title': '快速软件开发第一部分有效开发完成',
            'classify': '开发',
            'view': '142',
            'like': '66',
            'comment': '88'
          },
          {
            'title': '快速软件开发第一部分有效开发完成',
            'classify': '开发',
            'view': '142',
            'like': '66',
            'comment': '88'
          },
          {
            'title': '快速软件开发第一部分有效开发完成',
            'classify': '开发',
            'view': '142',
            'like': '66',
            'comment': '88'
          },
        ],
      }
    }

  }
</script>

<style scoped>
  .main-content {
    margin: 40px auto;
    max-width: 1400px;
    padding: 0 24px;
    position: relative;
  }

  .manage-btn {
    float: right;
    padding: 6px 16px;
    background: #387aff;
    color: #fff;
    margin: 33px 0;
  }

  .table {
    background: #fff;
    border: 1px solid #ddd;
  }

  .table thead {
    color: #777;
  }

  .table thead th {
    text-align: center;
  }

  .table thead th:first-child {
    text-align: left;
  }

  .table tbody th {
    color: #387aff;
  }

  .table tbody td {
    text-align: center;
  }

  .table > thead > tr > th {
    border-bottom: 1px solid #ddd;
  }

  .edit {
    color: #387aff;
    cursor: pointer;
  }

  .delete {
    color: #ff0000;
    cursor: pointer;
    outline: none;
  }
</style>
